<template>
    <div class="upload" v-title data-title="创作中心">
        <header-bar></header-bar>
        <div class="upload-box">
            <n-menu class="upload-menu" :options="menuOptions" :default-value="defaultOption" />
            <div class="upload-router">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { h, ref, onBeforeMount, defineComponent } from "vue";
import { NIcon, NMenu } from "naive-ui";
import { RouterLink, useRoute } from 'vue-router';
import HeaderBar from '@/components/HeaderBar.vue';
import { BookOutline, VideocamOutline, ListOutline } from "@vicons/ionicons5";


export default defineComponent({
    setup() {
        const route = useRoute();
        const defaultOption = ref('');//默认激活菜单
        const menuOptions = [
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: "UploadVideoHome",
                            }
                        },
                        { default: () => '发布视频' }
                    ),
                key: "upload",
                icon: renderIcon(VideocamOutline),
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: "VideoManage",
                            }
                        },
                        { default: () => '稿件管理' }
                    ),
                key: "content",
                icon: renderIcon(BookOutline),
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: "CommentManage",
                            }
                        },
                        { default: () => '评论管理' }
                    ),
                key: "comment",
                icon: renderIcon(ListOutline),
            },
        ];

        function renderIcon(icon: any) {
            return () => h(NIcon, null, { default: () => h(icon) });
        }

        onBeforeMount(() => {
            switch (route.name) {
                case 'UploadVideoHome':
                    defaultOption.value = 'upload';
                    break;
                case 'VideoManage':
                    defaultOption.value = 'content';
                    break;
                case 'CommentManage':
                    defaultOption.value = 'comment';
                    break;
                default:
                    defaultOption.value = 'upload';
                    break;
            }
        })

        return {
            menuOptions,
            defaultOption,
            renderIcon
        }
    },
    components: {
        NMenu,
        HeaderBar,
    }
});
</script>

<style lang="less" scoped>
.upload {
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    background: #f7f7f7;

    .upload-box {
        display: flex;
        margin: 20px 120px;
    }

    .upload-menu {
        width: 220px;
        height: 500px;
        min-width: 200px;
        background-color: #fff;
    }

    .upload-router {
        width: 100%;
        min-width: 700px;
        min-height: 500px;
        margin-left: 20px;
        background-color: #fff;
    }
}
</style>